<template>
    <div class="house-earning">
        <div class="header-title">
            <span @click="$router.go(-1)" class="mint-toast-icon mintui mintui-back"></span>
            <span>房租收益</span>
            <span></span>
        </div>
        <!-- 累计收益 -->
        <div class="total-earning">
            <p>
                累计收益
                <span>(USDT)</span>
            </p>
            <p @click="$router.push({name:'houseEarningDetail'})">564123256</p>
            <div>
                <div>
                    <img src="../../assets/img/leiji.png" alt />
                    <p>昨日收益</p>
                    <p>5648748715</p>
                </div>
                <div>
                    <img src="../../assets/img/yizhushouyi.png" alt />
                    <p>昨日收益</p>
                    <p>5648748715</p>
                </div>
            </div>
        </div>
        <!-- 所持列表 -->
        <div class="scroll-range">
            <mt-loadmore
                :top-method="loadTop"
                :bottom-method="loadBottom"
                :bottom-all-loaded="allLoaded"
                :autoFill="false"
                ref="loadmore"
            >
                <div class="own-list">
                    <div class="own-list-detail">
                    <div>
                        <p>SGXC (持有)</p>
                        <p>10000USDT</p>
                    </div>
                    <div>
                        <img src="../../assets/img/jinbi3.png" alt />
                        <span></span>
                    </div>
                    <div>
                        <p>累计收益</p>
                        <p>50USDT</p>
                    </div>
                </div>
                <div class="own-list-detail">
                    <div>
                        <p>SGXC (持有)</p>
                        <p>10000USDT</p>
                    </div>
                    <div>
                        <img src="../../assets/img/jinbi3.png" alt />
                        <span></span>
                    </div>
                    <div>
                        <p>累计收益</p>
                        <p>50USDT</p>
                    </div>
                </div>
                <div class="own-list-detail">
                    <div>
                        <p>SGXC (持有)</p>
                        <p>10000USDT</p>
                    </div>
                    <div>
                        <img src="../../assets/img/jinbi3.png" alt />
                        <span></span>
                    </div>
                    <div>
                        <p>累计收益</p>
                        <p>50USDT</p>
                    </div>
                </div>
                <div class="own-list-detail">
                    <div>
                        <p>SGXC (持有)</p>
                        <p>10000USDT</p>
                    </div>
                    <div>
                        <img src="../../assets/img/jinbi3.png" alt />
                        <span></span>
                    </div>
                    <div>
                        <p>累计收益</p>
                        <p>50USDT</p>
                    </div>
                </div>
                </div>
            </mt-loadmore>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            //加载
            allLoaded: false, //数据是否加载完毕
            pageNum: 1
        };
    },
    methods: {
        //下拉刷新
        loadTop() {
            setTimeout(() => {
                this.$refs.loadmore.onTopLoaded();
            }, 1000);
        },
        //上拉加载
        loadBottom() {
            this.pageNum++;
            setTimeout(() => {
                this.$refs.loadmore.onBottomLoaded();
            }, 1000);
        }
    }
};
</script>
<style lang="less" scoped>
.header-title {
    color: white;
}
// 累计收益
.total-earning {
    width: 90%;
    margin: 10px auto;
    height: 220px;
    background-color: @white;
    border-radius: 5px;
    p:nth-child(1) {
        color: @blueColor10;
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        padding: 40px 0 10px;
        span {
            color: @blueColor5;
            font-size: 12px;
        }
    }
    p:nth-child(2) {
        font-size: 34px;
        color: @blueColor5;
        text-align: center;
    }
    div:nth-child(3) {
        .flexAround();
        margin: 20px 0;
        > div {
            p {
                text-align: center;
                font-size: 14px;
                color: @blueColor10;
            }
            p:nth-of-type(1) {
                margin: 5px 0;
            }
            img {
                display: block;
                margin: 0 auto;
            }
        }
        > div:nth-child(1) {
            img {
                width: 15px;
            }
        }
        > div:nth-child(2) {
            img {
                width: 18px;
            }
        }
    }
}
// 列表
.scroll-range {
    height: 55vh;
    color: @blueColor10;
    .own-list {
        padding: 10px 18px 15px;
        .own-list-detail {
            .flexBetweenCenter();
            background-color: @white;
            padding: 0 15px;
            height: 85px;
            border-radius: 5px;
            margin-bottom: 14px;
            box-shadow: 0 0 15px #eee;
            > div {
                width: 33%;
                font-size: 13px;
                color: @blueColor10;
                font-weight: bold;
                text-align: center;
                p:first-child {
                    margin-bottom: 10px;
                }
            }
            > div:nth-child(2) {
                img {
                    width: 18px;
                    display: block;
                    margin: 0 auto;
                }
                span {
                    display: inline-block;
                    width: 100%;
                    border-bottom: 1px solid @blueColor10;
                }
            }
        }
    }
}
</style>
